<template>
    <!-- <fl-navBar dark :border="false" fixed background-color="#fff" status-bar  /> -->
    <view class="books">
        <fl-search placeholder="请输入姓名" @searchCon="searchCon" />
        <scroll-view @scroll="scroll" :scroll-into-view="scrollInto" class="scroll-view" scroll-y>
            <view class="myself_">
                <view class="my_title">江苏泛联科技有限公司</view>
                <view class="my_cont">
                    <view class="myIcon"></view>
                    <view class="mySchool">江苏泛联科技有限公司</view>
                </view>
            </view>
            <view class="temp">
                <view class="myself" :id="'item-' + index" v-for="(ele, index) in list" :key="index">
                    <view class="my_title">{{ ele.name }} <text class="city_num">({{ ele.children.length }})</text></view>
                    <view class="my_cont" v-for="(item, idx) in ele.children" :key="idx">
                        <view class="myIcon"></view>
                        <view class="mySchool">{{ item.name }}</view>
                    </view>
                </view>

            </view>

        </scroll-view>
        <view class="city_list">
            <view :style="{ color: acIndex === i ? '#1D84F6' : '#2A2A2A' }" class="city_item" @tap="clickItem(i)"
                v-for="(v, i) in citys" :key="i">{{ v }}</view>
        </view>
    </view>
</template>
  
<script setup>
import { ref, nextTick } from 'vue'
import { onLoad } from "@dcloudio/uni-app";
const scrollInto = ref('')
const heightArr = ref([])
const acIndex = ref(0)
const searchCon = (e) => {

}
const citys = ['南京', '无锡', '杭州', '徐州']
const list = ref([
    {
        name: '南京',
        children: [
            {
                name: '南京职业学校1'
            },
            {
                name: '南京职业学校2'
            },
            {
                name: '南京职业学校3'
            },
            {
                name: '南京职业学校4'
            },
            {
                name: '南京职业学校5'
            },
            {
                name: '南京职业学校'
            },
            {
                name: '南京职业学校6'
            },
            {
                name: '南京职业学校7'
            },
            {
                name: '南京职业学校8'
            },
            {
                name: '南京职业学校9'
            },
        ]
    },
    {
        name: '无锡',
        children: [
            {
                name: '无锡职业学校1'
            },
            {
                name: '无锡职业学校2'
            },
            {
                name: '无锡职业学校3'
            },
            {
                name: '无锡职业学校4'
            },
            {
                name: '无锡职业学校5'
            },
            {
                name: '无锡职业学校7'
            },
            {
                name: '无锡职业学校8'
            },
            {
                name: '无锡职业学校9'
            },
        ]
    },
    {
        name: '杭州',
        children: [
            {
                name: '杭州职业学校1'
            },
            {
                name: '杭州职业学校3'
            },
            {
                name: '杭州职业学校4'
            },
            {
                name: '杭州职业学校5'
            },
            {
                name: '杭州职业学校'
            },
            {
                name: '杭州职业学校6'
            },
            {
                name: '杭州职业学校7'
            },
            {
                name: '杭州职业学校8'
            },
            {
                name: '杭州职业学校9'
            },
        ]
    },
    {
        name: '徐州',
        children: [
            {
                name: '徐州职业学校1'
            },
            {
                name: '徐州职业学校2'
            },
            {
                name: '徐州职业学校3'
            },
            {
                name: '徐州职业学校4'
            },
            {
                name: '徐州职业学校5'
            },
            {
                name: '徐州职业学校'
            },
            {
                name: '徐州职业学校6'
            },
            {
                name: '徐州职业学校7'
            },
            {
                name: '徐州职业学校8'
            },
            {
                name: '徐州职业学校9'
            },
        ]
    }
])
onLoad(() => {
    nextTick(() => {
        let query = wx.createSelectorQuery();
        query.selectAll('.myself').boundingClientRect((rect) => {
            rect.forEach(ele => {
                calculateHeight(ele.height);
            })
        }).exec();
    })
})
const clickItem = (i) => {
    acIndex.value = i
    scrollInto.value = 'item-' + i
}
function scroll(e) {
    let scrollHeight = e.detail.scrollTop;
    let index = calculateIndex(heightArr.value, scrollHeight);
    acIndex.value = index
}
// 计算滚动的区间
function calculateHeight(height) {

    if (!heightArr.value.length) {
        heightArr.value.push(height)
    } else {
        let heights = height + heightArr.value[heightArr.value.length - 1]
        heightArr.value.push(heights);
    }
}
// 计算左边选中的下标
function calculateIndex(arr, scrollHeight) {
    let index = 0;

    for (let i = 0; i < arr.length; i++) {
        if (scrollHeight >= 0 && scrollHeight < arr[0]) {
            index = 0;
            scrollInto.value = 'item-0'
        } else if (scrollHeight >= arr[i - 1] && scrollHeight < arr[i]) {
            index = i;
            scrollInto.value = 'item-'+index
        }
    }
    return index;
}
</script>
  
<style lang="scss">
page {
    overflow: hidden;
    height: 100%;

}

.books {
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: #fff;

    .scroll-view {
        flex: 1;
        height: 100%;
        overflow: hidden;

        .myself,
        .myself_ {
            width: 92%;
            margin: 0 auto;


            .my_title {
                font-size: 26rpx;
                color: #666666;
                margin: 25rpx 0 16rpx 0;

                .city_num {
                    padding-left: 15rpx;
                }
            }

            .my_cont {
                height: 100rpx;
                display: flex;
                align-items: center;
                border-bottom: 2rpx solid #EBEDF0;

                .myIcon {
                    width: 76rpx;
                    height: 76rpx;
                    border-radius: 50%;
                    overflow: hidden;
                    background-color: #004190;
                    margin-right: 15rpx;
                }

                .mySchool {
                    font-size: 30rpx;
                    color: #333333;

                }
            }
        }

    }

    .city_list {
        position: fixed;
        right: 0;
        top: 20%;
        height: 100%;
        background-color: #fff;

        .city_item {
            padding: 0 25rpx;
            height: 60rpx;
            line-height: 60rpx;
            color: #2A2A2A;
            font-size: 24rpx;
        }
    }
}
</style>
  